<template>
  <div class="chat-sidebar" ref="sidebarRef" @scroll="onSidebarScroll">
    <a-dropdown :trigger="['contextmenu']" v-for="c in sessionList" :key="c.id">
      <div
        :class="['chat-item', { active: c.id === activeId, pinned: c.is_pinned }]"
        @click="chatStore.handleSelectSession(c.id)"
      >
      <a-avatar
        :src="c.avatar"
        :size="40"
        style="cursor: pointer"
        @click.stop
      />
        <div class="info">
          <div class="name">
            <PushpinFilled v-if="c.is_pinned" class="pin-icon" />
            {{ c.name }}
          </div>
          <div class="last-msg">{{ lastMessages[c.id] }}</div>
        </div>
        <a-badge v-if="unreadCounts[c.id]" :count="unreadCounts[c.id]" />
      </div>
      <template #overlay>
        <a-menu @click="({ key }) => handleMenuClick(key, c)">
          <a-menu-item :key="c.is_pinned ? 'unpin' : 'pin'">
            {{ c.is_pinned ? '取消置顶' : '置顶会话' }}
          </a-menu-item>
          <a-menu-item key="delete" danger>删除会话</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
    <div v-if="loadingMoreSession && hasMoreSessions" class="loading-more">
      <a-spin /> 加载更多会话...
    </div>
    <div v-else-if="!chatStore.hasMoreSessions" class="no-more">
      已加载全部会话
    </div>
  </div>
</template>

<script setup>
import UserAvatarCardVue from './UserAvatarCard.vue';
import { PushpinFilled } from '@ant-design/icons-vue';
import { useChatStore } from '@/stores/chat';
import { storeToRefs } from 'pinia';
import { message } from 'ant-design-vue';
import { ref, computed, onMounted } from 'vue'
import { getUserInfo } from '@/api/user'

const chatStore = useChatStore();
const { 
    sessionList,
    activeId,
    lastMessages,
    hasMoreSessions,
    loadingMoreSession,
    friends,
    unreadCounts
} = storeToRefs(chatStore);

onMounted(async () => {
  await chatStore.initializer()
})

const sidebarRef = ref(null)

function onSidebarScroll() {
  const el = sidebarRef.value
  if (!el) return
  if (
    el.scrollTop + el.clientHeight >= el.scrollHeight - 2 &&
    hasMoreSessions.value &&
    !loadingMoreSession.value
  ) {
    chatStore.handleScrollToBottom()
  }
}

// async function getLastMessages(id) {
//   if (lastMessages.value.get(id) !== undefined) {
//     return lastMessages.value.get(id)
//   } else {
//     await chatStore.fetchSessionMessages(id)
//     return lastMessages.value.get(id)
//   }
// }
// 处理右键菜单点击
function handleMenuClick(key, session) {
  switch (key) {
    case 'pin':
      chatStore.pinSession(session.id);
      message.success('已置顶会话');
      break;
    case 'unpin':
      chatStore.unpinSession(session.id);
      message.success('已取消置顶');
      break;
    case 'delete':
      chatStore.deleteSession(session.id);
      message.success('已删除会话');
      break;
  }
}
</script>

<style scoped>
.chat-sidebar {
  width: 260px;
  background: #fff;
  border-right: 1px solid #eee;
  overflow-y: auto;
  height: 100%;
}
.chat-item {
  display: flex;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}
.chat-item.active {
  background: #e6f7ff;
}
.chat-item.pinned {
  background: #fafafa;
}
.info {
  flex: 1;
  margin-left: 12px;
  min-width: 0;
}
.name {
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}
.pin-icon {
  font-size: 12px;
  color: #1890ff;
  flex-shrink: 0;
}
.last-msg {
  color: #888;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.loading-more {
  text-align: center;
  color: #999;
  padding: 12px 0;
}
.no-more {
  text-align: center;
  color: #bbb;
  font-size: 13px;
  padding: 10px 0;
}
</style> 